<template>
  <view 
    class="fu-tabbar-item"
    :class="{ 'fu-tabbar-item--active': active }"
    @click="onClick"
  >
    <!-- 图标 -->
    <view class="fu-tabbar-item__icon">
      <slot name="icon">
        <block v-if="icon">
          <!-- 字体图标 -->
          <text 
            v-if="!isImage(icon)"
            class="fu-icon"
            :class="`icon-${icon}`"
            :style="{ color: active ? activeColor : color }"
          ></text>
          <!-- 图片图标 -->
          <image
            v-else
            class="fu-tabbar-item__image"
            :src="active ? activeIcon || icon : icon"
            mode="aspectFit"
          />
        </block>
      </slot>
      <!-- 徽标 -->
      <view 
        v-if="badge"
        class="fu-tabbar-item__badge"
      >{{ badge }}</view>
      <view 
        v-else-if="dot"
        class="fu-tabbar-item__dot"
      ></view>
    </view>
    
    <!-- 文本 -->
    <view 
      class="fu-tabbar-item__text"
      :style="{ color: active ? activeColor : color }"
    >
      <slot>{{ text }}</slot>
    </view>
  </view>
</template>

<script>
/**
 * fu-tabbar-item 标签栏项组件
 * @description 标签栏组件的子组件
 * @property {String} text - 文本
 * @property {String} icon - 图标
 * @property {String} color - 默认颜色
 * @property {String} activeColor - 激活颜色
 * @property {String/Number} badge - 徽标内容
 * @property {Boolean} dot - 是否显示小红点
 * @property {Boolean} active - 是否激活
 * @event {Function} click - 点击时触发
 */
export default {
  name: 'fu-tabbar-item',
  props: {
    text: {
      type: String,
      default: ''
    },
    icon: {
      type: String,
      default: ''
    },
    color: {
      type: String,
      default: '#666'
    },
    activeColor: {
      type: String,
      default: 'var(--fu-primary-color)'
    },
    badge: {
      type: [String, Number],
      default: ''
    },
    dot: {
      type: Boolean,
      default: false
    },
    active: {
      type: Boolean,
      default: false
    },
    activeIcon: {
      type: String,
      default: ''
    }
  },
  emits: ['click'],
  methods: {
    onClick(event) {
      this.$emit('click', event)
    },
    isImage(icon) {
      return /\.(png|jpg|jpeg|gif|webp)$/.test(icon)
    }
  }
}
</script>

<style lang="scss" scoped>
.fu-tabbar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  
  &:active {
    opacity: 0.7;
  }
  
  &__icon {
    position: relative;
    margin-bottom: 8rpx;
    
    .fu-icon {
      font-family: 'fuIcon';
      font-size: 44rpx;
      line-height: 1;
    }
  }
  
  &__badge {
    position: absolute;
    top: -12rpx;
    right: -16rpx;
    padding: 0 12rpx;
    height: 32rpx;
    min-width: 32rpx;
    line-height: 32rpx;
    border-radius: 16rpx;
    background-color: var(--fu-danger-color);
    color: #fff;
    font-size: 20rpx;
    text-align: center;
    transform: translateX(50%);
  }
  
  &__dot {
    position: absolute;
    top: -4rpx;
    right: -8rpx;
    width: 16rpx;
    height: 16rpx;
    border-radius: 50%;
    background-color: var(--fu-danger-color);
    transform: translateX(50%);
  }
  
  &__text {
    font-size: 24rpx;
    line-height: 1;
  }
  
  &__image {
    width: 44rpx;
    height: 44rpx;
    display: block;
  }
}
</style> 